<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>页面布局1</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <div class="main">
      <div class="main-org">
        <div class="main-left">
          <div style="display: flex; justify-content: space-between">
            <h4>经营概况</h4>
            <el-button type="text" style="padding: 0">更多</el-button>
          </div>
          <div class="flex main-left-content">
            <div class="flex" v-for="(item, index) in statistics" :key="index">
              <div class="circle"></div>
              <div>
                <el-statistic
                  group-separator=","
                  :precision="2"
                  :value="item.value"
                  :title="item.title"
                ></el-statistic>
              </div>
            </div>
          </div>
          <div class="flex main-left-content">
            <div class="flex" v-for="(item, index) in statistics" :key="index">
              <div class="circle"></div>
              <div>
                <el-statistic
                  group-separator=","
                  :precision="2"
                  :value="item.value"
                  :title="item.title"
                ></el-statistic>
              </div>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div
            style="
              display: flex;
              justify-content: space-between;
              width: 100%;
              padding-bottom: 5px;
              padding-left: 10px;
            "
          >
            <h4>消息中心</h4>
            <el-button type="text" style="padding: 0">更多</el-button>
          </div>
          <div class="message-item" v-for="item in messages" :key="item.id">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-left">
          <div style="display: flex; justify-content: space-between">
            <h4>基地信息</h4>
            <el-button type="text" style="padding: 0">更多</el-button>
          </div>
          <div class="picture flex">
            <div class="picture-content flex" v-for="i in picture" :key="i.id">
              <div class="picture-content-left"></div>
              <div class="picture-content-right">
                <h5>方形地块</h5>
                <div
                  class="flex"
                  style="
                    width: 200px;
                    justify-content: space-between;
                    margin-bottom: 10px;
                  "
                >
                  <i class="el-icon-user-solid">{{ i.title }}</i>
                  <i class="el-icon-user-solid">{{ i.phone }}</i>
                </div>
                <div style="width: 200px">
                  <el-progress
                    :percentage="(i.use / i.all) * 100"
                  ></el-progress>
                </div>
                <p>已使用：{{ i.use }}亩/{{ i.all }}亩</p>
              </div>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-top">
            <div
              class="flex"
              style="align-items: center; height: 100%; margin-left: 20px"
            >
              <i class="el-icon-s-operation"></i>
              <h3>使用指南</h3>
            </div>
          </div>
          <div class="content-right-bottom">
            <div class="bottom-image">
              <el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statistics: [
        { title: '进行中项目', value: 221222227, id: '122' },
        { title: '已接收项目', value: 1280, id: '123' },
        { title: '异常项目', value: 7, id: '124' },
        { title: '运送物资', value: 1380, id: '125' },
      ],
      picture: [
        {
          title: '对沙',
          use: 50,
          all: 150,
          phone: 221222227,
          value: undefined,
          id: '122',
        },
        {
          title: '对沙',
          use: 70,
          all: 150,
          phone: 221222227,
          value: undefined,
          id: '123',
        },
      ],
      messages: [
        { id: 1, text: '04/10亲，您版本服务今天就到期111111111' },
        { id: 2, text: '04/10亲，您版本服务今天就到期' },
        { id: 3, text: '04/10亲，您版本服务今天就到期' },
        { id: 4, text: '04/10亲，您版本服务今天就到期' },
        { id: 5, text: '04/10亲，您版本服务今天就到期' },
        { id: 6, text: '04/10亲，您版本服务今天就到期' },
        { id: 7, text: '04/10亲，您版本服务今天就到期' },
        // { id: 8, text: '04/10亲，您版本服务今天就到期' },
        // { id: 9, text: '04/10亲，您版本服务今天就到期' },
        // { id: 9, text: '04/10亲，您版本服务今天就到期' },
        // { id: 9, text: '04/10亲，您版本服务今天就到期' },
        // { id: 9, text: '04/10亲，您版本服务今天就到期' },
        // { id: 9, text: '04/10亲，您版本服务今天就到期' },
        // { id: 9, text: '04/10亲，您版本服务今天就到期' },

        // 添加更多消息...
      ],
    }
  },
  mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
@gap: 20px;
.flex {
  display: flex;
}
.flex-direction-column {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}

.flex-y-center {
  display: flex;
  // justify-content: center;
  align-items: center;
}
.flex-between {
  justify-content: space-between;
}

.main {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .main-org {
    width: 100%;
    height: 200px;
    display: flex;
    padding: 12px;
    gap: @gap;

    .main-left {
      width: 80%;
      height: 200px;
      border: 1px solid rgba(187, 187, 187, 1);
      background: #fff;
      padding: 12px;
    }
    .main-right {
      flex: 1;
      height: 200px;
      border: 1px solid rgba(187, 187, 187, 1);
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .message-item {
        padding-bottom: 10px;
        padding: 5px;
        padding-left: 15px;
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 使用省略号 */
        cursor: pointer; /* 鼠标悬停时显示指针 */
        min-height: 10px;
        max-width: 240px;
        font-size: 12px;
      }

      .message-item:hover {
        max-width: 100%;
        white-space: normal; /* 允许文本换行 */
        overflow: visible; /* 显示溢出部分 */
      }
    }
  }

  .content {
    margin: 20px 0;

    width: 100%;
    height: 200px;
    display: flex;
    padding: 12px;
    gap: @gap;
    .content-left {
      width: 80%;
      height: 200px;
      border: 1px solid rgba(187, 187, 187, 1);
      background: #fff;
      padding: 12px;
      .picture {
        margin-top: 20px;
        width: 100%;
        flex: 1;
        justify-content: space-around;
        .picture-content {
          width: 350px;
          height: 130px;
          border: 1px solid rgba(187, 187, 187, 1);
          padding: 20px;
          .picture-content-left {
            min-width: 110px;
            width: 120px;
            height: 80px;
            border: 1px solid rgba(187, 187, 187, 1);
          }
          .picture-content-right {
            margin-left: 10px;
          }
        }
      }
    }
    .content-right {
      flex: 1;
      height: 250px;
      //   background: #fff;
      .content-right-top {
        border: 1px solid rgba(187, 187, 187, 1);
        height: 60px;
        background: #fff;
      }
      .content-right-bottom {
        margin-top: 20px;

        height: 120px;
        background-color: #ffffff6c;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 290px;
    display: flex;
    padding: 12px;
    gap: @gap;
    .bottom-left {
      width: 35%;
      height: 280px;
      border: 1px solid rgba(187, 187, 187, 1);
      background: #fff;
    }
    .bottom-right {
      flex: 1;
      height: 280px;
      border: 1px solid rgba(187, 187, 187, 1);
      background: #fff;
    }
  }
  .main-left-content {
    justify-content: space-between;
    height: 60px;
    margin: 20px;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
  }
  .circle {
    width: 40px; /* 按钮宽度 */
    height: 40px; /* 按钮高度 */
    border-radius: 50%; /* 使按钮成为圆形 */
    background-color: #0076ff; /* 按钮背景颜色 */
    border: none; /* 去掉边框 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
  }
  /deep/.el-statistic .con .number {
    font-size: 15px;
    padding: 0 4px;
    color: #0076ff;
  }
  .el-progress {
    width: 230px;
  }
  .el-icon-s-operation {
    font-size: 30px;
    width: 50px;
  }
  .el-icon-picture-outline {
    font-size: 20px;
  }
  .bottom-image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
